<template>
  <div class="title text-[1.2vh] font-[bold]">
    <box-icon color="#ffffff" size="18px" name="map" class="v-top" />
    管点明细汇总
  </div>
  <div>
    <el-row class="mt-[1vh]" :gutter="10">
      <el-col
        :span="12"
        v-for="item in pointData"
        :key="item.classId"
        class="mb-[0.8vh]"
      >
        <div style="padding: 0.4vh; background: #123c65e6">
          <el-row>
            <el-col :span="8">
              <!-- <img src="@/assets/icons/device1.png" class="h-[4vh]" /> -->
              <img
                v-if="f_GetPointImg(item.classId) == 1"
                :src="markerIcon1"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 2"
                :src="markerIcon2"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 3"
                :src="markerIcon3"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 4"
                :src="markerIcon4"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 5"
                :src="markerIcon5"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 6"
                :src="markerIcon6"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 7"
                :src="markerIcon7"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 8"
                :src="markerIcon8"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 9"
                :src="markerIcon9"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 10"
                :src="markerIcon10"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 11"
                :src="markerIcon11"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 12"
                :src="markerIcon12"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 13"
                :src="markerIcon13"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 14"
                :src="markerIcon14"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 15"
                :src="markerIcon15"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 16"
                :src="markerIcon16"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 17"
                :src="markerIcon17"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 18"
                :src="markerIcon18"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 19"
                :src="markerIcon19"
                class="h-[3vh]"
              />
              <img
                v-if="f_GetPointImg(item.classId) == 20"
                :src="markerIcon20"
                class="h-[3vh]"
              />
            </el-col>
            <el-col :span="16" class="text-[1.2vh]">
              <p class="mt-[0.2vh] mb-[0.2vh] text-center">{{ item.num }}</p>
              <p class="mt-[0.5vh] mb-[0.2vh] text-center text-[12px]">
                {{
                  item.className.length > 8
                    ? item.className.substr(0, 8) + "..."
                    : item.className
                }}(个)
              </p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="title text-[1.2vh] font-[bold] mt-[1vh]">
    <box-icon color="#ffffff" size="18px" name="map" class="v-top" />
    管段明细汇总
  </div>
  <div>
    <el-row class="mt-[1vh]" :gutter="10">
      <el-col
        :span="12"
        v-for="item in lineData"
        :key="item.classId"
        class="mb-[0.8vh]"
      >
        <div style="padding: 0.4vh; background: #123c65e6">
          <el-row>
            <el-col :span="8">
              <b
                class="linePoint"
                :style="{ background: item.image ? item.image : 'red ' }"
              ></b>
            </el-col>
            <el-col :span="16" class="text-[1.2vh]">
              <p class="mt-[0.2vh] mb-[0.2vh] text-center">
                {{ (Number(item.length) / 1000).toFixed(2) }}
              </p>
              <p class="mt-[0.5vh] mb-[0.2vh] text-center text-[12px]">
                {{
                  item.className.length > 8
                    ? item.className.substr(0, 8) + "..."
                    : item.className
                }}(km)
              </p>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { find } from "lodash";
import DashboardAPI from "@/api/DashboardAPI";

const props = defineProps({
  tablePointTypeData: {
    type: Array,
    required: true,
  },
});

const tablePointTypeData = ref(props.tablePointTypeData);

console.log(tablePointTypeData.value);
const pointData = ref([]);
const lineData = ref([]);

// 隐患图片
const markerIcon1 = ref(
  new URL(`../../../assets/device/1.png`, import.meta.url).href
);
const markerIcon2 = ref(
  new URL(`../../../assets/device/2.png`, import.meta.url).href
);
const markerIcon3 = ref(
  new URL(`../../../assets/device/3.png`, import.meta.url).href
);
const markerIcon4 = ref(
  new URL(`../../../assets/device/4.png`, import.meta.url).href
);
const markerIcon5 = ref(
  new URL(`../../../assets/device/5.png`, import.meta.url).href
);
const markerIcon6 = ref(
  new URL(`../../../assets/device/6.png`, import.meta.url).href
);
const markerIcon7 = ref(
  new URL(`../../../assets/device/7.png`, import.meta.url).href
);
const markerIcon8 = ref(
  new URL(`../../../assets/device/8.png`, import.meta.url).href
);
const markerIcon9 = ref(
  new URL(`../../../assets/device/9.png`, import.meta.url).href
);
const markerIcon10 = ref(
  new URL(`../../../assets/device/10.png`, import.meta.url).href
);
const markerIcon11 = ref(
  new URL(`../../../assets/device/11.png`, import.meta.url).href
);
const markerIcon12 = ref(
  new URL(`../../../assets/device/12.png`, import.meta.url).href
);
const markerIcon13 = ref(
  new URL(`../../../assets/device/13.png`, import.meta.url).href
);
const markerIcon14 = ref(
  new URL(`../../../assets/device/14.png`, import.meta.url).href
);
const markerIcon15 = ref(
  new URL(`../../../assets/device/15.png`, import.meta.url).href
);
const markerIcon16 = ref(
  new URL(`../../../assets/device/16.png`, import.meta.url).href
);
const markerIcon17 = ref(
  new URL(`../../../assets/device/17.png`, import.meta.url).href
);
const markerIcon18 = ref(
  new URL(`../../../assets/device/18.png`, import.meta.url).href
);
const markerIcon19 = ref(
  new URL(`../../../assets/device/19.png`, import.meta.url).href
);
const markerIcon20 = ref(
  new URL(`../../../assets/device/20.png`, import.meta.url).href
);

// 返回管点图标
function f_GetPointImg(classId: String) {
  let color = 1;
  if (classId) {
    let data = find(tablePointTypeData.value, { classId: classId });
    console.log(classId);

    color = data ? data.image : 1;
  }
  return color;
}

// 查询：管点分组统计信息
function f_QueryGisPointGroupInfo() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "01",
  };
  DashboardAPI.api_query_gis_point_group_info(params).then(({ data }) => {
    if (data && data.length) {
      pointData.value = data;
    }
  });
}

// 查询：管段分组统计信息
function f_QuryGisLineGroupInfo() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    pClassId: "02",
  };
  DashboardAPI.api_query_gis_line_group_info(params).then(({ data }) => {
    if (data && data.length) {
      lineData.value = data;
    }
  });
}

onMounted(() => {
  f_QueryGisPointGroupInfo();
  f_QuryGisLineGroupInfo();
});
</script>
<style lang="scss" scoped>
.linePoint {
  height: 12px;
  width: 40px;
  display: inline-block;
  background: red;
  margin-top: 14px;
  margin-left: 4px;
  border-radius: 2px;
}
.box {
  display: flex;
  background: transparent;

  > div:first-child,
  > div:first-child + div + div {
    flex: 1;
    // display: flex;
    // justify-content: center;
  }

  > div:first-child + div,
  > div:first-child + div + div + div {
    flex: 2;
    padding-top: 2vh;
  }

  > div {
    > div {
      height: 9vh;

      img {
        position: relative;
        top: 50%;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
      }

      p {
        height: 3vh;
        margin: 0;
        line-height: 3vh;
        text-align: center;
      }

      > p:first-child {
        font-family: YouSheBiaoTiHei, sans-serif;
        font-size: 1.8vh;
        color: #fcd966;
      }

      > p:last-child {
        font-size: 1vh;
      }
    }
  }
}

.star {
  padding: 1vh;

  > div {
    margin-bottom: 0.5vh;
    font-size: 1vh;
    color: #c2e0ffa4;

    span {
      display: inline-block;
      width: 1.2vh;
      height: 1.2vh;
      margin-right: 0.6vh;
      line-height: 1.2vh;
      vertical-align: sub;
      background: #fff;
      border-radius: 50%;
    }

    span.color1 {
      background: #0f8;
    }

    span.color2 {
      background: #a2e7b7;
    }

    span.color3 {
      background: #fcd966;
    }

    span.color4 {
      background: #ee6868;
    }
  }
}
</style>
